<template>
    <div class="login-form">
        <h1>学生选课系统</h1>
        <form>
            <input type="text" placeholder="用户名" v-model="userName"/>
            <br />
            <input type="password" placeholder="密码" v-model="password" autocomplete/>
            <br />
            <button class="c-btn btn-primary" type="submit" @click="login">提交</button>
        </form>

    </div>
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: "LoginForm",
        setup(props, context) {
            const userName = ref(''),
                  password = ref('');

            const login = (e) => {
                e.preventDefault();
                context.emit('login', {username:userName.value, password: password.value})
            }

            return {
                userName,
                password,
                login
            }
        }
    }
</script>

<style lang="scss" scoped>
.login-form {
    border-radius: 6px;
    background: #fff;
    width: 400px;
    padding: 25px 25px 5px 25px;
    text-align: center;

    input {
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        width: 100%;
        margin-bottom: 10px;
    }

    button {
        width: 100px;
    }

}
</style>